---
title: Aseprite plugin
slug: /aseprite-plugin
section: Plugins
---

[This extension](https://github.com/excaliburjs/excalibur-aseprite) adds support for [Aseprite](https://www.aseprite.org/) SpriteSheets and Animations exported to json AND the `.aseprite` native format.

```
> npm install @excaliburjs/plugin-aseprite
```

1. Optionally export JSON using the [aseprite cli](https://www.aseprite.org/docs/cli/) or through the UI

![Export as JSON in Aseprite](https://github.com/excaliburjs/excalibur-aseprite/raw/main/export.gif)

2. Load the Aseprite resource via the json and voila ✨

- Use `AsepriteResource.getAnimation(name)` to retrieve animations by the name in aseprite
- Use `AsepriteResource.getSpriteSheet()` to get the equivalent Excalibur SpriteSheet
- Use `Aseprite.rawAseprite` to access the raw data structure from Aseprite
- Use `Aseprite.image` to access the source image for the SpriteSheet

## Example:

```typescript
import { AsepriteResource } from '@excaliburjs/plugin-aseprite'

const game = new Engine({
  width: 600,
  height: 400,
  displayMode: DisplayMode.FitScreen,
})

const asepriteSpriteSheet = new AsepriteResource('./beetle.aseprite')
// or json
// const asepriteSpriteSheet = new AsepriteResource('./beetle.json')

const loader = new Loader([asepriteSpriteSheet])
game.start(loader).then(() => {
  const anim = asepriteSpriteSheet.getAnimation('Loop')
  const actor = new Actor({ pos: vec(100, 100) })
  actor.graphics.use(anim)

  game.currentScene.add(actor)
})
```

![Example running](https://github.com/excaliburjs/excalibur-aseprite/raw/main/example.gif)
